<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取数据</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.js"></script>

</head>

<body>

    <div id="app">
        <h1>My Portfolia</h1>
        <ul>
            <li>
                <router-link to="/" exact>Home</router-link>
            </li>
            <li>
                <router-link to="/aboutme">About</router-link>
            </li>
        </ul>
        <router-view></router-view>
    </div>


    <script>
        const AboutMe = {
            template: `<div>Name:{{name}}<br>Phone:{{phone}}</div>`,
            data() {
                return {
                    name: undefined,
                    phone: undefined
                }
            },
            beforeRouteEnter(to, from, next) {
                axios.post('https://schematic-ipsum.herokuapp.com/',{
                    "type": "object",
                    "properties": {
                        "name": {
                            "type": "string",
                            "ipsum": "name"
                        },
                        "phone": {
                            "type": "string",
                            "format": "phone"
                        }
                    }
                }).then(response =>{
                    next(vm => {
                        vm.name = response.data.name;
                        vm.phone = response.data.phone;
                    })
                })
            }
        };

        const Home = { template: '<div>This is my home page</div>' };

        Vue.use(VueRouter);
        const router = new VueRouter({
            routes: [
                { path: '/', component: Home},
                { path: '/aboutme', component: AboutMe}
            ]
        });

        new Vue({
            router,
            el: '#app'
        })

    </script>
</body>

</html>